<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超级泡泡龙 - 4399小游戏</title>
    <link rel="stylesheet" href="css/styles.css">
    <script src="js/main.js" defer></script>
    <script src="js/upload.js"></script>
    <style>
        /* 游戏详情页特定样式 */
        .game-details {
            display: flex;
            gap: 30px;
            margin-bottom: 30px;
        }
        
        .game-preview {
            flex-basis: 65%;
        }
        
        .game-preview img {
            width: 100%;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        
        .game-info {
            flex-basis: 35%;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            padding: 20px;
        }
        
        .game-stats {
            margin: 20px 0;
            display: flex;
            justify-content: space-between;
        }
        
        .game-stat {
            text-align: center;
            flex-basis: 33%;
            padding: 10px 0;
            border-right: 1px solid #eee;
        }
        
        .game-stat:last-child {
            border-right: none;
        }
        
        .stat-number {
            display: block;
            font-size: 20px;
            font-weight: bold;
            color: #27ae60;
        }
        
        .stat-label {
            font-size: 14px;
            color: #666;
        }
        
        .download-btn {
            display: block;
            width: 100%;
            padding: 12px;
            background-color: #27ae60;
            color: white;
            text-align: center;
            border-radius: 4px;
            font-size: 16px;
            font-weight: 500;
            text-decoration: none;
            margin: 20px 0;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .download-btn:hover {
            background-color: #219653;
        }
        
        .play-btn {
            display: block;
            width: 100%;
            padding: 12px;
            background-color: #ff9933;
            color: white;
            text-align: center;
            border-radius: 4px;
            font-size: 16px;
            font-weight: 500;
            text-decoration: none;
            margin: 20px 0;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .play-btn:hover {
            background-color: #e67e22;
        }
        
        .game-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin: 15px 0;
        }
        
        .tag {
            background-color: #f1f1f1;
            color: #666;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 12px;
        }
        
        .game-tabs {
            margin: 30px 0;
            border-bottom: 1px solid #eee;
        }
        
        .tab-button {
            padding: 10px 20px;
            margin-right: 5px;
            background: none;
            border: none;
            font-size: 16px;
            color: #666;
            cursor: pointer;
        }
        
        .tab-button.active {
            color: #27ae60;
            border-bottom: 2px solid #27ae60;
        }
        
        .tab-content {
            display: none;
            padding: 20px 0;
        }
        
        .tab-content.active {
            display: block;
        }
        
        .screenshots {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            margin-top: 20px;
        }
        
        .screenshot img {
            width: 100%;
            border-radius: 4px;
            cursor: pointer;
            transition: transform 0.3s;
        }
        
        .screenshot img:hover {
            transform: scale(1.05);
        }
        
        .comments-section {
            margin-top: 30px;
        }
        
        .comment {
            display: flex;
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid #eee;
        }
        
        .comment-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-right: 15px;
        }
        
        .comment-content {
            flex-grow: 1;
        }
        
        .comment-author {
            font-weight: 500;
            margin-bottom: 5px;
        }
        
        .comment-date {
            font-size: 12px;
            color: #999;
            margin-bottom: 10px;
        }
        
        .comment-text {
            line-height: 1.5;
        }
        
        .comment-form {
            margin-top: 30px;
        }
        
        .comment-form textarea {
            width: 100%;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 15px;
            height: 120px;
            font-family: inherit;
            margin-bottom: 15px;
        }
        
        .rating-selection {
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }
        
        .rating-selection label {
            margin-right: 10px;
        }
        
        .stars {
            display: inline-flex;
        }
        
        .star-rating {
            font-size: 20px;
            color: #ccc;
            cursor: pointer;
            transition: color 0.2s;
        }
        
        .star-rating.active {
            color: #ffba00;
        }
        
        .submit-comment {
            background-color: #27ae60;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            float: right;
        }
    </style>
</head>
<body>
    <header>
        <nav class="main-nav">
            <div class="logo">
                <h1>4399小游戏</h1>
            </div>
            <ul class="nav-links">
                <li><button id="uploadBtn" class="upload-btn">上传游戏</button></li>
                <li><a href="index.html">首页</a></li>
                <li><a href="#" class="active">小游戏</a></li>
                <li class="user-actions">
                    <button id="loginBtn" class="login-btn">登录</button>
                    <button id="registerBtn" class="register-btn">注册</button>
                </li>
            </ul>
            <div class="search-box">
                <input type="text" placeholder="搜索游戏...">
                <button>搜索</button>
            </div>
        </nav>
    </header>

    <div class="container">
        <main>
            <section class="game-header">
                <h2>超级泡泡龙</h2>
                <div style="display: flex; align-items: center; margin-top: -10px;">
                    <span style="color: #27ae60; font-weight: bold; font-size: 18px; margin-right: 5px;">4.8</span>
                    <span style="color: #ffba00; font-size: 18px;">★★★★★</span>
                    <span style="color: #666; margin-left: 10px;">1,245次游玩</span>
                </div>
            </section>

            <div class="game-details">
                <div class="game-preview">
                    <img src="https://via.placeholder.com/800x450" alt="超级泡泡龙游戏截图">
                    
                    <div class="game-tabs">
                        <button class="tab-button active" data-tab="description">游戏介绍</button>
                        <button class="tab-button" data-tab="instructions">操作指南</button>
                        <button class="tab-button" data-tab="screenshots">游戏截图</button>
                    </div>
                    
                    <div id="description" class="tab-content active">
                        <h3>游戏介绍</h3>
                        <p>《超级泡泡龙》是一款经典的消除类游戏，玩家需要发射彩色泡泡，当三个或更多相同颜色的泡泡连在一起时，它们就会消失。</p>
                        <p>游戏特色:</p>
                        <ul>
                            <li>100个富有挑战性的关卡</li>
                            <li>多种道具和特殊泡泡</li>
                            <li>精美的游戏画面和音效</li>
                            <li>排行榜系统，挑战高分</li>
                        </ul>
                        <p>这款游戏适合所有年龄段的玩家，简单易学，但要获得高分需要策略和技巧。每个关卡都设置了不同的挑战，随着游戏的进行，难度会逐渐增加。</p>
                    </div>
                    
                    <div id="instructions" class="tab-content">
                        <h3>操作指南</h3>
                        <p>游戏操作非常简单：</p>
                        <ul>
                            <li>使用鼠标瞄准并点击发射泡泡</li>
                            <li>按空格键切换当前泡泡和下一个泡泡</li>
                            <li>按P键暂停游戏</li>
                        </ul>
                        <p>游戏目标：</p>
                        <p>每关的目标是在规定的步数内消除所有悬挂的泡泡。当三个或更多相同颜色的泡泡相连时，它们将会消失。如果有泡泡不再连接到顶部，它们也会掉落。</p>
                        <p>特殊泡泡：</p>
                        <ul>
                            <li>彩虹泡泡：可以匹配任何颜色</li>
                            <li>炸弹泡泡：可以炸掉周围的泡泡</li>
                            <li>冰冻泡泡：使屏幕短暂冻结，给你更多思考时间</li>
                        </ul>
                    </div>
                    
                    <div id="screenshots" class="tab-content">
                        <h3>游戏截图</h3>
                        <div class="screenshots">
                            <div class="screenshot">
                                <img src="https://via.placeholder.com/300x200" alt="游戏截图1">
                            </div>
                            <div class="screenshot">
                                <img src="https://via.placeholder.com/300x200" alt="游戏截图2">
                            </div>
                            <div class="screenshot">
                                <img src="https://via.placeholder.com/300x200" alt="游戏截图3">
                            </div>
                            <div class="screenshot">
                                <img src="https://via.placeholder.com/300x200" alt="游戏截图4">
                            </div>
                            <div class="screenshot">
                                <img src="https://via.placeholder.com/300x200" alt="游戏截图5">
                            </div>
                            <div class="screenshot">
                                <img src="https://via.placeholder.com/300x200" alt="游戏截图6">
                            </div>
                        </div>
                    </div>
                    
                    <div class="comments-section">
                        <h3>用户评论 (12)</h3>
                        
                        <div class="comment">
                            <img src="https://via.placeholder.com/50" alt="用户头像" class="comment-avatar">
                            <div class="comment-content">
                                <div class="comment-author">玩家123</div>
                                <div class="comment-date">2023-05-10</div>
                                <div class="comment-rating" style="color: #ffba00; margin-bottom: 5px;">★★★★★</div>
                                <div class="comment-text">非常好玩的泡泡龙游戏！画面精美，操作流畅。我已经通关50关了，难度适中，很有挑战性。推荐给所有喜欢消除类游戏的玩家。</div>
                            </div>
                        </div>
                        
                        <div class="comment">
                            <img src="https://via.placeholder.com/50" alt="用户头像" class="comment-avatar">
                            <div class="comment-content">
                                <div class="comment-author">游戏达人</div>
                                <div class="comment-date">2023-05-05</div>
                                <div class="comment-rating" style="color: #ffba00; margin-bottom: 5px;">★★★★☆</div>
                                <div class="comment-text">整体不错，比较怀旧的感觉。后期关卡有点难，希望能增加一些提示功能。音效很棒，带来很多童年回忆！</div>
                            </div>
                        </div>
                        
                        <div class="comment">
                            <img src="https://via.placeholder.com/50" alt="用户头像" class="comment-avatar">
                            <div class="comment-content">
                                <div class="comment-author">新手玩家</div>
                                <div class="comment-date">2023-04-28</div>
                                <div class="comment-rating" style="color: #ffba00; margin-bottom: 5px;">★★★★★</div>
                                <div class="comment-text">作为一个从未玩过泡泡龙的新手，我发现这款游戏特别容易上手，教程很清晰。色彩搭配舒适，不伤眼睛，可以长时间玩耍。</div>
                            </div>
                        </div>
                        
                        <div class="comment-form">
                            <h4>发表评论</h4>
                            <div class="rating-selection">
                                <label>评分:</label>
                                <div class="stars">
                                    <span class="star-rating" data-rating="1">★</span>
                                    <span class="star-rating" data-rating="2">★</span>
                                    <span class="star-rating" data-rating="3">★</span>
                                    <span class="star-rating" data-rating="4">★</span>
                                    <span class="star-rating" data-rating="5">★</span>
                                </div>
                            </div>
                            <textarea placeholder="请输入您的评论..."></textarea>
                            <button class="submit-comment">提交评论</button>
                            <div style="clear: both;"></div>
                        </div>
                    </div>
                </div>
                
                <div class="game-info">
                    <div style="margin-bottom: 20px;">
                        <button class="play-btn">开始游戏</button>
                        <a href="#" class="download-btn">下载游戏</a>
                    </div>
                    
                    <div class="game-stats">
                        <div class="game-stat">
                            <span class="stat-number">4.8</span>
                            <span class="stat-label">评分</span>
                        </div>
                        <div class="game-stat">
                            <span class="stat-number">1,245</span>
                            <span class="stat-label">游玩次数</span>
                        </div>
                        <div class="game-stat">
                            <span class="stat-number">548</span>
                            <span class="stat-label">下载量</span>
                        </div>
                    </div>
                    
                    <div style="margin: 20px 0;">
                        <h4 style="margin-bottom: 10px;">游戏信息</h4>
                        <p><strong>开发者:</strong> 休闲游戏工作室</p>
                        <p><strong>发布日期:</strong> 2023-01-15</p>
                        <p><strong>版本:</strong> 1.2.5</p>
                        <p><strong>大小:</strong> 25MB</p>
                        <p><strong>语言:</strong> 简体中文</p>
                        <p><strong>平台:</strong> Web, Windows, Android</p>
                    </div>
                    
                    <div class="game-tags">
                        <span class="tag">休闲</span>
                        <span class="tag">消除</span>
                        <span class="tag">益智</span>
                        <span class="tag">单人</span>
                        <span class="tag">家庭</span>
                    </div>
                    
                    <div style="margin-top: 20px;">
                        <h4 style="margin-bottom: 10px;">分享</h4>
                        <div style="display: flex; gap: 10px;">
                            <a href="#" style="color: #1877f2; text-decoration: none;">微信</a>
                            <a href="#" style="color: #1da1f2; text-decoration: none;">QQ</a>
                            <a href="#" style="color: #ea4335; text-decoration: none;">微博</a>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <footer>
        <div class="footer-content">
            <div class="footer-section">
                <h4>关于我们</h4>
                <ul>
                    <li><a href="#">联系我们</a></li>
                    <li><a href="#">关于作者</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h4>帮助中心</h4>
                <ul>
                    <li><a href="#">常见问题</a></li>
                    <li><a href="#">游戏攻略</a></li>
                    <li><a href="#">意见反馈</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h4>关注我们</h4>
                <div class="social-links">
                    <a href="https://weixin.qq.com/" target="_blank" title="关注我们的微信公众号">微信</a>
                    <a href="https://im.qq.com/" target="_blank" title="加入我们的QQ群">QQ</a>
                </div>
            </div>
        </div>
        <div class="copyright">
            <p>© 2025 4399小游戏. All rights reserved.</p>
        </div>
    </footer>

    <!-- 上传游戏模态框 -->
    <div id="uploadModal" class="modal">
        <div class="modal-content">
            <span class="close-button">&times;</span>
            <h2>上传游戏</h2>
            <form id="uploadGameForm">
                <div class="form-group">
                    <label for="gameTitle">游戏标题</label>
                    <input type="text" id="gameTitle" name="title" required>
                </div>
                <div class="form-group">
                    <label for="gameCategory">游戏分类</label>
                    <select id="gameCategory" name="category" required>
                        <option value="">选择分类...</option>
                        <option value="casual">休闲游戏</option>
                        <option value="action">动作游戏</option>
                        <option value="puzzle">益智游戏</option>
                        <option value="strategy">策略游戏</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="gameDescription">游戏描述</label>
                    <textarea id="gameDescription" name="description" rows="4" required></textarea>
                </div>
                <div class="form-group">
                    <label for="gameFile">游戏文件</label>
                    <input type="file" id="gameFile" name="gameFile" required>
                </div>
                <div class="form-group">
                    <label for="gameThumbnail">游戏缩略图</label>
                    <input type="file" id="gameThumbnail" name="thumbnail" accept="image/*" required>
                </div>
                <div class="form-actions">
                    <button type="submit" class="btn-primary">上传游戏</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 登录模态框 -->
    <div id="loginModal" class="modal">
        <div class="modal-content">
            <span class="close-button">&times;</span>
            <h2>用户登录</h2>
            <form id="loginForm">
                <div class="form-group">
                    <label for="loginUsername">用户名</label>
                    <input type="text" id="loginUsername" name="username" required>
                </div>
                <div class="form-group">
                    <label for="loginPassword">密码</label>
                    <input type="password" id="loginPassword" name="password" required>
                </div>
                <div class="form-actions">
                    <button type="submit" class="btn-primary">登录</button>
                    <div class="form-links">
                        <a href="#" id="forgotPassword">忘记密码?</a>
                        <a href="#" id="switchToRegister">没有账号? 立即注册</a>
                    </div>
                </div>
                <div class="social-login">
                    <p>使用社交账号登录</p>
                    <div class="social-buttons">
                        <button type="button" class="social-btn wechat">微信</button>
                        <button type="button" class="social-btn qq">QQ</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- 注册模态框 -->
    <div id="registerModal" class="modal">
        <div class="modal-content">
            <span class="close-button">&times;</span>
            <h2>用户注册</h2>
            <form id="registerForm">
                <div class="form-group">
                    <label for="registerUsername">用户名</label>
                    <input type="text" id="registerUsername" name="username" required>
                </div>
                <div class="form-group">
                    <label for="registerEmail">邮箱</label>
                    <input type="email" id="registerEmail" name="email" required>
                </div>
                <div class="form-group">
                    <label for="registerPassword">密码</label>
                    <input type="password" id="registerPassword" name="password" required>
                </div>
                <div class="form-group">
                    <label for="confirmPassword">确认密码</label>
                    <input type="password" id="confirmPassword" name="confirmPassword" required>
                </div>
                <div class="form-actions">
                    <button type="submit" class="btn-primary">注册</button>
                    <div class="form-links">
                        <a href="#" id="switchToLogin">已有账号? 立即登录</a>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- JavaScript 引用 -->
    <script src="js/api.js"></script>
    <script src="js/main.js"></script>
    <script src="js/upload.js"></script>
    <script>
        // 选项卡切换功能
        document.addEventListener('DOMContentLoaded', function() {
            const tabButtons = document.querySelectorAll('.tab-button');
            const tabContents = document.querySelectorAll('.tab-content');
            
            tabButtons.forEach(button => {
                button.addEventListener('click', function() {
                    // 移除所有活动状态
                    tabButtons.forEach(btn => btn.classList.remove('active'));
                    tabContents.forEach(content => content.classList.remove('active'));
                    
                    // 添加当前活动状态
                    this.classList.add('active');
                    const tabId = this.dataset.tab;
                    document.getElementById(tabId).classList.add('active');
                });
            });
            
            // 星级评分功能
            const stars = document.querySelectorAll('.star-rating');
            let selectedRating = 0;
            
            stars.forEach(star => {
                star.addEventListener('click', function() {
                    const rating = parseInt(this.dataset.rating);
                    selectedRating = rating;
                    
                    // 更新星星显示
                    stars.forEach(s => {
                        if(parseInt(s.dataset.rating) <= rating) {
                            s.classList.add('active');
                        } else {
                            s.classList.remove('active');
                        }
                    });
                });
                
                star.addEventListener('mouseover', function() {
                    const rating = parseInt(this.dataset.rating);
                    
                    // 预览星星
                    stars.forEach(s => {
                        if(parseInt(s.dataset.rating) <= rating) {
                            s.classList.add('active');
                        } else {
                            s.classList.remove('active');
                        }
                    });
                });
                
                star.addEventListener('mouseout', function() {
                    // 恢复已选择的星级
                    stars.forEach(s => {
                        if(parseInt(s.dataset.rating) <= selectedRating) {
                            s.classList.add('active');
                        } else {
                            s.classList.remove('active');
                        }
                    });
                });
            });
        });
    </script>
</body>
</html> 